
<!--
* description: 菜单权限分析
* logs:
    2019-12-10  mwhao
-->
<template>
  <section class="app-container app-container-table">
    <div id="TreeTable">
      <!--树形区域-->
      <el-aside class="el-slide">
        <el-row class="box-bottom">
          <el-col :span="24">
            <el-input v-model="searchData" />
          </el-col>
          <!-- <el-col :span="7">
            <el-button size="mini" type="danger" class="iconfont  icon-search" plain @click="filterNode"></el-button>
          </el-col> -->
        </el-row>
        <el-tree
          ref="tree"
          :key="eltree"
          :default-expanded-keys="expanded"
          auto-expand-parent
          node-key="id"
          :filter-node-method="filterNode"
          :data="menueList"
          highlight-current
          :props="defaultProps"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        />
      </el-aside>
      <!-- 网格区域 -->
      <el-main ref="mainHeight">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="组织" name="first">
            <one-table-template
              ref="multipleTablefirst"
              :dynamic-buttons="tableButtons"
              :dynamic-components="tableComponents"
              :dynamic-table-cols="tableCols"
              :dynamic-form-fields="formField"
              :dynamic-is-init-table="false"
              :dynamic-is-column-drop="true"
              :is-show-pagination="false"
              :dynamic-is-show-select="false"
              :dynamic-table-other-height="40 + pageCompHeight"
            />
          </el-tab-pane>
          <el-tab-pane label="角色" name="second">
            <one-table-template
              ref="multipleTableRole"
              :key="oneTablekey"
              :dynamic-buttons="tableButtons"
              :dynamic-components="tableComponents"
              :dynamic-table-cols="tableCols"
              :dynamic-form-fields="formField"
              :dynamic-is-init-table="false"
              :dynamic-is-column-drop="true"
              :is-show-pagination="false"
              :dynamic-is-show-select="false"
              :dynamic-table-other-height="40 + pageCompHeight"
            />
          </el-tab-pane>
          <el-tab-pane label="用户" name="third">
            <one-table-template
              ref="multipleTablethird"
              :key="oneTablekey"
              :dynamic-buttons="tableButtons"
              :dynamic-components="tableComponents"
              :dynamic-table-cols="tableCols"
              :dynamic-form-fields="formField"
              :dynamic-is-init-table="false"
              :dynamic-is-column-drop="true"
              :is-show-pagination="false"
              :dynamic-is-show-select="false"
              :dynamic-table-other-height="40 + pageCompHeight"
            />
          </el-tab-pane>
        </el-tabs>
        <!-- 分页器 -->
        <div class="el-pagination is-background">
          <el-pagination
            ref="oneTable.pageArea"
            :page-sizes="pageSizeArray"
            :page-size="dynamicPageSize"
            layout="prev, pager, next, sizes, ->, total"
            :prev-text="$t('sys.content.prevPage')"
            :next-text="$t('sys.content.nextPage')"
            :total="pages"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </div>
  </section>
</template>

<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
export default {
  name: 'MenuAnalyze',
  components: {
    OneTableTemplate
  },
  mixins: [oneTableWithViewTemplateMixins],
  data() {
    return {
      // 总条数
      pages: 0,
      // key
      oneTablekey: 'oneTablekey',
      // 默认显示的标签页
      activeName: 'first',
      // 默认展开的数组
      expanded: ['-1'],
      // 树状图渲染数组
      menueList: [],
      // key值
      eltree: 'eltree',
      // 树状显示的参数
      defaultProps: {
        children: 'children',
        label: 'text'
      },
      // 树状图搜索过滤
      searchData: '',
      //  按钮控件
      tableButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.getMenuPuerviewInfod(),
          name: 'search',
          position: 'right',
          fuzzySearch: true,
          text: this.$t('sys.button.query')
        }, // 查询
        {
          compKey: 'btnKey2',
          type: '',
          size: 'small',
          name: 'reset',
          clickEvent: () => this.reset(),
          text: this.$t('sys.button.reset')
        } // 重置
      ],
      // 动态组件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '组织名称' /* 组织名称*/,
              codeField: 'orgname',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey2',
              labelName: '组织编号' /* 组织编号*/,
              codeField: 'orgcode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            }
          ],
      // 动态生成网格列
      tableCols: [
        {
          prop: 'orgcode',
          label: '组织编号' /* 组织编号*/,
          width: null,
          align: 'center'
        },
        {
          prop: 'orgname',
          label: '组织名称' /* 组织名称*/,
          width: null,
          align: 'center'
        },
        {
          prop: 'tissueUrl',
          label: '组织路径' /* 组织路径*/,
          width: null,
          align: 'center'
        },
        {
          prop: 'tissueDescribe',
          label: '组织描述' /* 组织描述*/,
          width: null,
          align: 'center'
        },
        { prop: 'userId', label: '用户Id', hidden: true, align: 'center' }
      ],
      // 表单查询数据
      formField: {
        name: '',
        orgname: '',
        orgcode: '',
        menuid: -1,
        code: '',
        tabname: 2,
        rows: this.dynamicPageSize,
        page: 1,
        BUILT_IN: 0,
        ORG_NAME: '',
        ROLE_CODE: '',
        ROLE_ID: '',
        ROLE_NAME: '',
        USER_NAME: '',
        EMP_NAME: ''
      },
      // ref
      refd: 'multipleTablefirst',
      // 标签页label 组织=1;角色=2;用户=3;
      label: '1'
    }
  },
  watch: {
    // 侦听搜索框输入的变化
    searchData(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.tissueListd()
  },
  methods: {
    // 网格查询APIthat.
    getMenuPuerviewInfod() {
      var that = this
      if (that.label === '1') {
        that.formField.name = that.formField.orgname
        that.formField.code = that.formField.orgcode
      }
      if (that.label === '2') {
        that.formField.name = that.formField.ROLE_NAME
        that.formField.code = that.formField.ROLE_CODE
      }
      if (that.label === '3') {
        that.formField.name = that.formField.EMP_NAME
        that.formField.code = that.formField.USER_NAME
      }
      this.$store
        .dispatch('authorityManage/getMenuPuerviewInfo', this.formField)
        .then(response => {
          if (response.result === '1') {
            that.pages = response.records
            for (var k in response.rows) {
              if (response.rows[k].BUILT_IN === 0) {
                response.rows[k].BUILT_IN = '否'
              }
              if (response.rows[k].BUILT_IN === 1) {
                response.rows[k].BUILT_IN = '是'
              }
            }
            that.$refs[that.refd].list = response.rows
          }
        })
    },
    // 标签页点击事件
    handleClick(tab, event) {
      var that = this
      // 组织参数不对.待后期修改
      if (tab.label === '组织') {
        that.tableComponents = [
          {
            compKey: 'compKey1',
            labelName: '组织名称' /* 组织名称*/,
            codeField: 'orgname',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            isMust: true
          },
          {
            compKey: 'compKey2',
            labelName: '组织编号' /* 组织编号*/,
            codeField: 'orgcode',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            isMust: true
          }
        ]
        that.tableCols = [
          {
            prop: 'orgcode',
            label: '组织编号' /* 组织编号*/,
            width: null,
            align: 'center'
          },
          {
            prop: 'orgname',
            label: '组织名称' /* 组织名称*/,
            width: null,
            align: 'center'
          },
          {
            prop: 'tissueUrl',
            label: '是否内置' /* 组织路径*/,
            width: null,
            align: 'center'
          }
        ]
        that.refd = 'multipleTablefirst'
        that.formField.tabname = 2
        that.label = '1'
        that.getMenuPuerviewInfod()
      }
      if (tab.label === '角色') {
        that.tableComponents = [
          {
            compKey: 'compKey1',
            labelName: '角色编号' /* 角色编号*/,
            codeField: 'ROLE_CODE',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            isMust: true
          },
          {
            compKey: 'compKey2',
            labelName: '角色名称' /* 角色名称*/,
            codeField: 'ROLE_NAME',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            isMust: true
          }
        ]
        that.tableCols = [
          {
            prop: 'ROLE_CODE',
            label: '角色编号' /* 角色编号*/,
            width: null,
            align: 'center'
          },
          {
            prop: 'ROLE_NAME',
            label: '角色名称' /* 角色名称*/,
            width: null,
            align: 'center'
          },
          {
            prop: 'ORG_NAME',
            label: '组织结构' /* 组织结构*/,
            width: null,
            align: 'center'
          },
          {
            prop: 'BUILT_IN',
            label: '是否内置' /* 是否内置*/,
            width: null,
            align: 'center'
          }
        ]
        that.refd = 'multipleTableRole'
        that.formField.name = that.formField.ROLE_NAME
        that.formField.code = that.formField.ROLE_CODE
        that.label = '2'
        that.formField.tabname = 0
        that.getMenuPuerviewInfod()
      }
      if (tab.label === '用户') {
        that.tableComponents = [
          {
            compKey: 'compKey1',
            labelName: '用户名' /* 用户名*/,
            codeField: 'EMP_NAME',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            isMust: true
          },
          {
            compKey: 'compKey2',
            labelName: '员工姓名' /* 员工姓名*/,
            codeField: 'USER_NAME',
            component: () => import('@/components/org/commonInput'),
            type: 'inputText',
            isMust: true
          }
        ]
        that.tableCols = [
          {
            prop: 'USER_NAME',
            label: '用户名' /* 用户名*/,
            width: null,
            align: 'center'
          },
          {
            prop: 'EMP_NAME',
            label: '员工姓名' /* 员工姓名*/,
            width: null,
            align: 'center'
          },
          {
            prop: 'ORG_NAME',
            label: '组织结构' /* 组织结构*/,
            width: null,
            align: 'center'
          },
          {
            prop: 'BUILT_IN',
            label: '是否内置' /* 是否内置*/,
            width: null,
            align: 'center'
          }
        ]
        that.refd = 'multipleTablethird'
        that.formField.tabname = 3
        that.formField.name = that.formField.EMP_NAME
        that.formField.code = that.formField.USER_NAME
        that.label = '3'
        that.getMenuPuerviewInfod()
      }
      this.oneTablekey = this.oneTablekey + 1
    },
    // 重置orgnameorgcode
    reset() {
      var that = this
      if (that.label === '1') {
        that.formField.orgname = ''
        that.formField.orgcode = ''
      }
      if (that.label === '2') {
        that.formField.ROLE_NAME = ''
        that.formField.ROLE_CODE = ''
      }
      if (that.label === '3') {
        that.formField.EMP_NAME = ''
        that.formField.USER_NAME = ''
      }
    },
    // 树状图查询API
    tissueListd() {
      var that = this
      this.$store.dispatch('authorityManage/userallpurview').then(response => {
        if (response.result === '1') {
          that.menueList.push(response.rows)
        }
      })
    },
    // 树状图点击后的回调
    handleNodeClick(a, b, c) {
      this.formField.menuid = a.id
      this.getMenuPuerviewInfod()
    },
    // 树状图筛选功能
    filterNode(value, data, node) {
      if (!value) return true
      const level = node.level
      const _array = [] // 这里使用数组存储 只是为了存储值。
      this.getReturnNode(node, _array, value)
      let result = false
      _array.forEach(item => {
        result = result || item
      })
      return result
    },
    // 树状图筛选递归  备注:如果数据量大的话,会很卡
    getReturnNode(node, _array, value) {
      const isPass =
        node.data && node.data.text && node.data.text.indexOf(value) !== -1
      isPass ? _array.push(isPass) : ''
      this.index++
      if (!isPass && node.level != 1 && node.parent) {
        this.getReturnNode(node.parent, _array, value)
      }
    },
    // 选择分页事件
    handleSizeChange(val) {
      this.formField.rows = val
      this.formField.page = 1
      this.getMenuPuerviewInfod()
    },
    // 当前页选中事件
    handleCurrentChange(val) {
      this.formField.page = val
      this.getMenuPuerviewInfod()
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .box-bottom {
  position: absolute;
  height: 38px;
  width: 100%;
  background: #ffff;
  border-bottom: 1px solid #f1f1f1;
  padding-top: 3px;
}
/deep/ .el-tree.el-tree--highlight-current {
  margin-top: 38px;
}
/deep/ .el-tabs__nav.is-top {
  margin-left: 10px;
}
.box-bottom /deep/ .el-col-15 {
  margin-right: 15px;
}
.el-main /deep/ .el-tabs__header.is-top {
  background: #ffff;
  background: #ffff;
}
/deep/ .el-tabs__header {
  margin: 0;
}
</style>
